<?php use app\commands\front\MockWidget; ?>
<?php MockWidget::begin(); ?>
<?php MockWidget::end();
$type = Yii::$app->request->get('type', 1);//阅读2 全部 5
$continue = Yii::$app->request->get('continue', 0);//0开始 1继续
$cate_id = Yii::$app->request->get('cate', 1);
?>
<link rel="stylesheet" href="/cn/css/mock/write.css?v=1.1">

<section class="exerciseBox" id="readBox">
    <div class="exerciseHead">
        <div class="headCenter">
            <div class="headCenterLeft">
                <img :src="userImage?userImage:'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/20@2x.png'"
                     alt="">
                {{userName}}
            </div>
            <div class="headCenterRight">
                <div class="headTime">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/22@2x.png" alt="">
                    <p class="not-precise" v-show="timeLayout" v-cloak @mouseover="timeLayout = false">
                        <span class="time">{{minutes == 60?'60':minutes!='0'?Number(minutes)+1:'0'}}</span>
                        <span class="minutes">minutes</span>
                        left
                    </p>
                    <p class="precise" v-show="!timeLayout" v-cloak @mouseleave="timeLayout = true">
                        <span class="minute">{{minutes<10?'0'+minutes:minutes}}</span>
                        : <span class="second">{{seconds<10?'0'+seconds:seconds}}</span>
                        left
                    </p>
                </div>
                <div class="buttonBox">
                    <a href="javascript:;" class="FinishBtn" @click="finishSec">Finish Test</a>
                    <a href="javascript:;" class="PauseBtn" @click="pause">Pause</a>
                    <a href="javascript:;" class="HelpBtn" @click="help">Help</a>
                    <a href="javascript:;" class="HideBtn" @click="hide">Hide</a>
                </div>
            </div>
        </div>
    </div>
    <div class="exerciseCenter" id="exerciseCenter">
        <!--第一步-->
        <div class="steps step1" v-show="steps == 1">
            <p class="stepTitle">
                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/24@2x.png" alt="">
                Confirm your details
            </p>
            <div class="stepContent">
                <p class="bc-title">EXAMPLE</p>
                <div class="bc-intro">
                    <p>・ Name:</p>
                    <p>・ Date of birth: XX-Xx-XXXX</p>
                    <p>・ Candidate number:XXXX-xxxxx</p>
                </div>
                <p class="stepTitle" style="width: 93%">
                    <img style="width: 15px;" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/25@2x.png" alt="">
                    If your details aren′t correct, please inform the invigilator.
                </p>
                <a href="javascript:;" class="confirmMessage" @click="steps = 3">My details are correct</a>
            </div>
            <div class="stepTip" v-if="showTip">
                <img @click="showTip = false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/26@2x.png" alt="">
                <p>Please click the "my details are correct" button to progress intothe listening familiarisation test,
                    inyour real IELTS testthere will be an invigilator in the roomto advise when to dothis.</p>
            </div>
        </div>
        <!--第三步-->
        <div class="steps step3" v-show="steps == 3">
            <div class="row">
                <div class="col">
                    <h5>IELTS Listening</h5>
                    <p>Time: 1 hour</p>
                    <h5>INSTRUCTIONS TO CANDIDATES</h5>
                    <ul>
                        <li>· Answer <strong>both</strong> tparts.</li>
                        <li>· You can change your answers at any time during the test.</li>
                    </ul>
                    <h5>INFORMATION FOR CANDIDATES</h5>
                    <ul>
                        <li>· There are two parts</li>
                        <li>· Part 2 contributes twice as much as Part 1 to the writing score.</li>
                        <li>· The test clock will show you when there are 10 minutes and 5 minutes remaining</li>
                    </ul>
                </div>
            </div>
            <p class="warnTips">Do not click 'Start test' until you are told to do so</p>
            <a href="javascript:;" class="StartTest" @click="startTest">Start test</a>
            <div class="stepTip" v-if="showTip" style="bottom: -100px">
                <img @click="showTip = false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/26@2x.png" alt="">
                <p>Please click the “Start test” button to start the familiarisation test, in your real IELTS test there
                    will be an invigilator in the room to advise when to do this.</p>
            </div>
        </div>
        <!--第四步 做题-->
        <div class="steps step4" id="stepExercise" style="margin: 0 auto" v-show="steps == 4">
            <div class="quesBox" v-for="(itemBox,indexBox) in dataQuestion.data">
                <div class="partTitle" v-show="currentPart == indexBox ">
                    <div v-html="itemBox.article"></div>
                </div>
                <div class="quesContent" v-show="currentPart == indexBox ">
                    <div class="fullText">
                        <div v-html="itemBox.description"></div>
                        <img style="max-width: 100%;display: block;margin: 20px 0"
                             :src="'https://www.thinkuprep.com/'+itemBox.image" alt="">
                    </div>
                    <div class="articleText">
                        <textarea class="userAnswer" v-model="AnswerArry[indexBox].answer" ref="focusTextarea"
                                  @input="wordStatic"></textarea>
                        <div class="totalWords">
                            <p>word count: <span>{{AnswerArry[indexBox].count}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="footNav">
                <div class="footNavCover">
                    <a href="javascript:void(0)" class="reviewBtn" @click="reviewStatus">REVIEW</a>
                    <div class="quesNumCover" id="quesNumCover">
                        <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                        <div class="zoning" v-for="(item,index) in AnswerArry">
                            <p>Part {{index + 1}}：</p>
                            <a href="javascript:void(0)"
                               :class="{'quesNum':index>-1, 'fulfil': item.answer!='', 'notSure': item.status == 1, 'doNow': index == currentPart }"
                               @click="welter(item.pid,item.content_id,item.th,item.status,index)">
                                {{index + 1}}
                            </a>
                        </div>
                    </div>
                    <div class="turnBtn">
                        <a href="javascript:void(0)" class="prevBtn" @click="prev()">
                            <img :src="currentPart != 0?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/31@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/34@2x.png'"
                                 alt="">
                        </a>
                        <a href="javascript:void(0)" class="nextBtn" @click="next()">
                            <img :src="currentPart != 1?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/35@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/32@2x.png'"
                                 alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    window.writeTest = new Vue({
        el: '#readBox',
        data() {
            return {
                userImage: '',
                userName: '',
                minutes: 60,
                seconds: 0,
                timeLayout: true,
                volume: 75,
                steps: 4,
                showTip: true,
                timeInter: null,
                isStart: false,

                type: '<?php echo $type?>',// 5
                cate: '<?php echo $cate?>',//
                continue: '<?php echo $continue?>',//

                letterArry: [], //序号  26个字母
                dataQuestion: {},//渲染数据
                resultid: '',//渲染数据
                content_id: '',//当前整套题目content_id
                content_btn: '',//当前小题content_id 默认第一题的
                content_btn_status: '',//当前小题目 方形 圆形
                content_pid: '',//当前题目pid 默认第一题的
                totoleQues: 2,//总题目个数
                currentPart: -1,//当前显示的part
                current: 1,//当前正在看的题目序号
                AnswerArry: [],//答题数据
                setInter:'',
            }
        },
        watch: {
            currentPart(val) {
                let that = this;
                clearInterval(that.setInter)
                let time = this.AnswerArry[val].createTime
                that.setInter = setInterval(() => {
                    time ++
                    that.AnswerArry[val].createTime = time
                }, 1000)
            }
        },
        created() {
            this.getData()
        },
        mounted() {
            initContextMenu('#stepExercise')
        },
        methods: {
            uniwaferTime() {

            },
            getData() {
                let that = this;
                $.get('/cn/mock/write-data', {
                    type: that.type,
                    cate: that.cate,
                    continue: that.continue,
                }, function (res) {
                    if (res.code == 1) {
                        that.initData(res.data);
                        that.resultid = res.data.resultid;
                        that.userImage = res.data.user.image;
                        that.userName = res.data.user.userName;
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            initData(data) {
                let that = this;
                that.dataQuestion = data;
                that.dataQuestion.data.map((item, itemIndex) => {
                    let obj = {};
                    obj.content_id = item.son.content_id;
                    obj.answer = '';
                    obj.trueAnswer = '';
                    obj.createTime = 0;
                    obj.status = 0;
                    obj.count = 0;
                    that.AnswerArry.push(obj);
                })
                that.currentPart = 0
            },
            //  统计英文单词数
            wordStatic() {
                let text = this.AnswerArry[this.currentPart].answer.replace(/\r\n/g, " ").replace(/\n/g, " ").replace(/<[^>]+>/g, "");

                let arr = text.split(" ");
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].length < 1) {
                        arr.splice(i, 1);
                        i = i - 1;
                    }
                }
                this.AnswerArry[this.currentPart].count = arr.length;
            },
            //review 题目
            reviewStatus() {
                let that = this;
                that.AnswerArry.map((item, index) => {
                    if (index == that.currentPart) {
                        item.status = 1
                    }
                })
            },
            //上一题
            prev() {
                this.currentPart = 0;
            },
            //下一题
            next() {
                this.currentPart = 1;
            },
            //按钮点击滚动
            welter(pid, content_id, index, status, part) {
                this.currentPart = part;//当前正在看的篇幅
            },

            submitText() {
                let that = this;
                clearInterval(that.setInter)
                $.post('/cn/mock/save-answer', {
                    resultid: that.resultid,
                    typeid: 3,
                    content: JSON.stringify(that.AnswerArry),
                }, function (res) {
                    if (res.code == 1) {
                        $('.tipsCover').show()
                        $('.tipsCommon').hide()
                        $('.tipsEnd').show()
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            //提交完成进入下阶段
            nextSection() {
                window.location.href = '/mock/result.html?type=' + this.type + '&cate=' + this.cate
            },
            startTest() {
                this.steps = 4
                this.isStart = true
                this.seconds = 59
                this.minutes = 59
                this.timeDown()
            },
            timeDown() {
                let that = this
                this.timeInter = setInterval(function () {
                    that.seconds--
                    if (that.seconds == 0 && that.minutes > 0) {
                        that.minutes--
                        that.seconds = 59
                    } else if (that.minutes == 0 && that.seconds == 0) {
                        clearInterval(that.timeInter)
                        alert('TIME OUT！将自动交卷')
                        that.submitText()
                    }
                }, 1000)
            },
            continueStep() {
                this.steps = 3
            },
            finishSec() {
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                if (this.type != 5) {
                    $('.tipsSection').show()
                } else {
                    $('.tipsTest').show()
                }

            },
            pause() {
                clearInterval(this.timeInter)
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                $('.tipsPause').show()
            },
            help() {
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                $('.tipsHelp').show()
            },
            hide() {
                $('.tipsCover').hide()
                $('.hiddenCover').show()
            }
        },
    });
</script>
